<template>
  <div>
    <van-popup
      v-model:show="store.params.show1"
      @close="store.changeParams({ show1: false, btnShow: true })"
      round
      position="bottom"
      :style="{ height: '90%' }"
    >
      <div class="imgInfo">
        <img :src="ProInfo.cover" alt="" />
        <div>
          <h3>{{ ProInfo.sell_point }}</h3>
          <h2 class="infoPrice">
            <span>￥{{ Math.floor(defaultSku.price) }}</span
            ><span> ￥{{ removeTrailingZeros(defaultSku.market_price) }}</span>
          </h2>
        </div>
      </div>
      <div class="con">
        <p v-for="i in ProInfo.spec_data" :key="i">
          {{ i.name }}
          <van-button
            v-for="item in i.option_data"
            :key="item"
            plain
            round
            color="#1ec7af"
            style="width: 40%; font-weight: bold; margin-top: 15px"
            type="success"
          >
            {{ item.name }}
          </van-button>
        </p>
        <p>
          选择数量
          <van-stepper
            v-model="num"
            min="1"
            :max="defaultSku.stock"
            button-size="32"
            disable-input
          />
        </p>
        <p>剩余数量：{{ defaultSku.stock }}件</p>
        <van-action-bar
          style="
            width: 90%;
            border-top: 1px solid #efefef;
            padding-top: 10px;
            margin-left: 5%;
          "
        >
          <van-action-bar-button
            color="#1ec7af"
            type="warning"
            text="加入购物车"
            @click="
              getAddCart(num, defaultSku.id),
                store.changeParams({ show1: false })
            "
            v-show="btnShow"
          />
          <van-action-bar-button
            color="#fa707f"
            type="danger"
            text="立即购买"
            v-show="btnShow"
          />
          <van-button
            style="
              width: 100%;
              margin-left: 10%;
              border-radius: 30px;
              font-weight: bold;
            "
            :color="color"
            v-show="!btnShow"
            @click="
              getAddCart(num, defaultSku.id),
                store.changeParams({ show1: false })
            "
            >确定</van-button
          >
        </van-action-bar>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useCount } from "../../store/index";
import { getAdds } from "../../API";
let store = useCount();
let num = ref(1);

let props = defineProps(["defaultSku", "ProInfo"]);
console.log(props.defaultSku, props.ProInfo);
let btnShow = ref(true);
let color = ref("");

let getAddCart = async (num, sku_id) => {
  let { data } = await getAdds({
    num,
    sku_id,
  });
  console.log(data);
};

watch(
  () => [store.params.btnShow, store.params.color],
  ([newval1, newval2]) => {
    btnShow.value = newval1;
    color.value = newval2;
  },
  {
    immediate: true,
  }
);

let removeTrailingZeros = (num) => {
  let str = String(num);
  let decimalIndex = str.indexOf(".");

  if (decimalIndex !== -1) {
    let decimalPart = str.substring(decimalIndex + 1);
    if (decimalPart === "00") {
      return str.substring(0, decimalIndex);
    } else if (decimalPart.charAt(decimalPart.length - 1) === "0") {
      return str.substring(0, str.length - 1);
    }
  }
  return str;
};
</script>
<style scoped>
.imgInfo {
  padding: 90px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #efefef;
}
.imgInfo img {
  width: 210px;
  height: 210px;
  border-radius: 20px;
  margin-right: 30px;
}
.infoPrice {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.infoPrice span:nth-of-type(1) {
  color: #f35b5a;
}
.infoPrice span:nth-of-type(2) {
  font-weight: normal;
  font-size: 28px;
  color: #949494;
  text-decoration: line-through;
  margin-left: 90px;
}
.con {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.con p {
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 28px;
  margin: 20px 30px;
  color: #949494;
}
</style>